<template>
	<div id="nav">
		<!-- <div @click="toRouter('/')">Home</div>
		<div @click="toRouter('/about')">About</div>
		<div @click="toRouter(`/${prefix}/first-child/home`)">FirstChildHome</div>
		<div @click="toRouter(`/${prefix}/first-child/about`)">FirstChildAbout</div>
		<div @click="toRouter(`/${prefix}/second-child/dashboard`)">SecondChildDashboard</div>
		<div @click="toRouter(`/${prefix}/second-child/about`)">SecondChildAbout</div>
		<div @click="toRouter(`/${prefix}/second-child/settings`)">SecondChildSettings</div> -->
		
		<router-link to="/">Home</router-link>
		|<router-link to="/about">About</router-link>
		
		|<router-link :to="`/${prefix}/first-child/empty`">FirstChildDmpty</router-link>
		|<router-link :to="`/${prefix}/first-child/home`">FirstChildHome</router-link>
		|<router-link :to="`/${prefix}/first-child/about`">FirstChildAbout</router-link>
		
		|<router-link :to="`/${prefix}/second-child/dashboard`">SecondChildDashboard</router-link>
		|<router-link :to="`/${prefix}/second-child/about`">SecondChildAbout</router-link>
		|<router-link :to="`/${prefix}/second-child/settings`">SecondChildSettings</router-link>
	</div>
	<MicroAppViwe />
</template>
<script setup>
	import microApp from '@micro-zoe/micro-app'
	import MicroAppViwe from '@/components/MicroAppViwe.vue'
	import {CHILD_PREFIX} from '@/micro/config.js'
	import { computed, ref } from 'vue'
	let prefix = ref(CHILD_PREFIX)
	// let toRouter = ()=>{
		
	// }
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
